{% include 'admin/header.html' %}
<script type="text/javascript">
    changeTab('考勤记录');
    $(function () {
        var $load = $('#loading');
        $(document).ajaxStart(function () {
            $load.removeClass('hidden');
        });
        $(document).ajaxStop(function () {
            $load.addClass('hidden');
        });

        $('#years').change(function () {
            var year = $(this).val().substring(0, 4);
            $.post('/class/by_year', {year: year}, function (data) {
                var $clazz = $('#clazz');
                $clazz.html('');
                $.each(data.result, function (k, v) {
                    var ht = '<option data-kid="' + v.id + '">' + v.k_name + '</option>';
                    $clazz.append(ht);
                });
            });
            $.post('/by_year', {year: year}, function (data) {
                var $stu = $('#stu');
                $stu.html('');
                $.each(data.result, function (k, v) {
                    var ht = '<option data-sid="' + v.id + '">' + v.stu_name + '</option>';
                    $stu.append(ht);
                });
            });
        });

        $('#search-re').click(function () {
            var year = $('#years').val().substring(0, 4);
            var kid = $('#clazz option:selected').data('kid');
            var sid = $('#stu option:selected').data('sid');
            var status = $('#status').val();
            var d = {year: year, kid: kid, sid: sid};
            $.each(d, function (k, v) {
                if (v === 0) {
                    delete d[k]
                }
            });
            d['status'] = status;
            $.post('/record/query', d, function (data) {
                fillData(data);
            });
        });

        // 分页
        $('.pagination').on('click', 'li', function (e) {
            e.preventDefault();
            var page = $(this).data('page');
            var year = $('#years').val().substring(0, 4);
            var kid = $('#clazz option:selected').data('kid');
            var sid = $('#stu option:selected').data('sid');
            var d = {page: page, year: year, kid: kid, sid: sid};
            $.each(d, function (k, v) {
                if (v === 0) {
                    delete d[k]
                }
            });
            d['status'] = $('#status').val();
            var status = $(this).attr("class");

            console.log(d);

            if (page > 0 && status !== "active") {
                {#console.log(d);#}
                $.post('/record/query', d, function (data) {
                    fillData(data);
                });
            }
        });
    });

    function r_delete(id) {
        var flag = confirm("确定要删除该条记录吗？");
        if (flag) {
            $.post('/record/delete/' + id, function (data) {
                if (data.status) {
                    alert('SUCCESS: 删除成功');
                    location.reload();
                } else {
                    alert('ERROR: ' + data.msg);
                }
            });
        }
    }

    function do_qing(id, self) {
        $.post('/record/qingjia/' + id, function (data) {
            if (data.status) {
                $(self).parents('tr').children('td').eq(3).find('span').attr('class', 'record-3');
                var bt = '<button onclick="r_delete(' + id + ')" class="btn btn-xs btn-danger">删除</button>';
                $(self).parent('td').append(bt);
                $(self).remove();
            } else {
                alert('ERROR: ' + data.msg);
            }
        });
    }

    function select_(page) {
        var lis = $('.pagination').find('li');
        $.each(lis, function (k, v) {
            var val = $(v).find('a').text();
            if (!/\W/.test(val)) {
                if (val != page) { // 非严格比较 允许字符串和数字相等
                    $(v).removeClass('active');
                } else {
                    $(v).addClass('active');
                }
            }
        });
    }

    function fillData(data) {
        var $tbody = $('tbody');
        $tbody.html('');

        var $p_box = $('.pagination');
        $p_box.html('');
        $('#page-div').addClass('hidden');
        if (data.status) {
            var i = 1;
            $.each(data.result.result, function (k, v) {
                var del = '';
                if (v.rd_status == 3) {
                    del = '<button onclick="r_delete(' + v.id + ')" class="btn btn-xs btn-danger">删除</button>';
                } else if (v.rd_status == 0) {
                    del = '<button onclick="do_qing(' + v.id + ', this)" class="btn btn-xs btn-warning">请假</button>'
                }
                var h = '<tr>\n' +
                    '<td>' + i++ + '</td>\n' +
                    '<td>' + v.k.k_name + '</td>\n' +
                    '<td>' + v.stu.stu_name + '</td>\n' +
                    '<td><span class="record-' + v.rd_status + '"></span></td>\n' +
                    '<td>' + v.deviation + ' M</td>\n' +
                    '<td>' + v.rd_time + '</td>\n' +
                    '<td>\n' +
                    '  <button onclick="show(' + v.id + ')" class="btn btn-xs btn-info">查看详情</button>\n' + del +
                    '</td>\n' +
                    '</tr>';
                $tbody.append(h);
            });

            if (data.result.pages > 1) {
                var $span = $('#page-div > span');

                $('#page-div').removeClass('hidden');
                $p_box.append('<li data-page="1"><a href="javascript:">首页</a></li>');
                $.each(data.result.pageNums, function (i, j) {
                    $p_box.append('<li data-page="' + j + '"><a href="javascript:">' + j + '</a></li>');
                });
                $p_box.append('<li data-page="' + data.result.pages + '"><a href="javascript:">尾页</a></li>');
                $span.html('共' + data.result.pages + '页，' + data.result.total + '条数据');
            }
        } else {
            $tbody.html('<tr><td align="center" colspan="6">无该记录</td></tr>');
        }

        select_(data.result.page);
    }

    function openModal() {
        var kid = $('#clazz option:selected').data('kid');
        var year = $('#years').val().substring(0, 4);
        if (kid && kid > 0) {
            $('#myModal').modal({keyboard: true});

            $.post('/record/count/' + kid, {year: year}, function (data) {
                var $tbody = $('#no-check > tbody');
                $tbody.html('');
                {#                console.log(data);#}
                if (data.result.length <= 0) {
                    $tbody.html('<tr><td class="text-center" colspan="4">无未签到学员</td></tr>');
                } else {
                    $.each(data.result, function (k, a) {
                        var $tr = '<tr>\n' +
                            '\t\t\t\t\t\t\t\t<td>' + a.stu_id + '</td>\n' +
                            '\t\t\t\t\t\t\t\t<td>' + a.stu_name + '</td>\n' +
                            '                                <td>' + a.stu_tel + '</td>\n' +
                            '\t\t\t\t\t\t\t\t<td>' + a.stu_class + '</td>\n' +
                            '\t\t\t\t\t\t\t</tr>';
                        $tbody.append($tr);
                    });
                }
                $("#sum").html(data.result.length);
            });
        } else {
            alert("请选择课程！");
        }
    }

    function R_Export_() {
        var year = $('#years').val().substring(0, 4);
        var kid = $('#clazz option:selected').data('kid');
        var sid = $('#stu option:selected').data('sid');
        var status = $('#status').val();
        window.open('/record/export?year=' + year +
            '&kid=' + kid + '&sid=' + sid + '&status=' + status, '_self');
    }
</script>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    未签到学员
                </h4>
            </div>
            <div class="modal-body">
                <table id="no-check" class="table table-striped">
                    <thead class="bg-color-x">
                    <tr>
                        <td>账号</td>
                        <td>名字</td>
                        <td>电话</td>
                        <td>班级</td>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <div style="padding: 8px 2px;" class="pull-left">总计：<span id="sum"></span></div>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="record-xcontent">
    <div>
        <div class="col-lg-12 col-xs-12">
            <h4><span class="fa fa-hand-o-right"></span> 考勤记录</h4>
            <div style="padding: 15px 5px 0;" class="pull-right">
                <div id="loading" class="pull-left hidden" style="padding: 4px 10px;">
                    <img class="" width="20" src="/static/images/loading.jpg" alt="加载中">
                </div>
                <div style="margin-right: 4px;" class="pull-left btn-group-sm">
                    <button onclick="R_Export_()" class="btn btn-success">导出</button>
                    <button onclick="openModal();" class="btn btn-warning">查看未签到</button>
                </div>
                <div class="input-group min-min-input pull-left">
                    <select id="status" class="form-control min-min-select">
                        <option value="-1">全部</option>
                        <option value="0">缺勤</option>
                        <option value="1">出勤</option>
                        <option value="2">迟到</option>
                        <option value="3">请假</option>
                    </select>
                </div>
                <div class="input-group min-min-input pull-left">
                    <select id="years" class="form-control min-min-select">
                        {% for foo in years %}
                            <option {% if year == foo.k_time %}selected{% endif %}>
                                {{ foo.k_time }}年度
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="input-group min-min-input pull-left">
                    <select id="clazz" style="width: 140px;" class="form-control min-min-select">
                        {% for foo in clzs %}
                            <option data-kid="{{ foo.id }}" {% if kid == foo.id %}selected{% endif %}>
                                {{ foo.k_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="input-group min-min-input pull-left">
                    <select id="stu" class="form-control min-min-select">
                        {% for foo in stus %}
                            <option data-sid="{{ foo.id }}">{{ foo.stu_name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <button id="search-re" class="btn btn-info btn-sm">搜索</button>
            </div>
        </div>
        <div>
            <div class="col-lg-12 col-xs-12">
                <table class="table table-striped">
                    <thead class="bg-color-x">
                    <tr>
                        <td>索引</td>
                        <td>课程名</td>
                        <td>学生名</td>
                        <td>考勤状态</td>
                        <td>位置偏差</td>
                        <td>签到时间</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody>
                    {% if not record_list or record_list.total <= 0 %}
                        <tr>
                            <td align="center" colspan="7"> 暂无数据</td>
                        </tr>
                    {% else %}
                        {% for a in record_list.result %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td>{{ a.k.k_name }}</td>
                                <td>{{ a.stu.stu_name }}</td>
                                <td><span class="record-{{ a.rd_status }}"></span></td>
                                <td>{{ a.deviation }} M</td>
                                <td>{{ a.rd_time }}</td>
                                <td>
                                    <button onclick="show({{ a.id }})" class="btn btn-xs btn-info">查看详情</button>
                                    {% if a.rd_status == 0 %}
                                        <button onclick="do_qing({{ a.id }}, this)" class="btn btn-xs btn-warning">请假
                                        </button>
                                    {% endif %}
                                    {% if a.rd_status == 3 %}
                                        <button onclick="r_delete({{ a.id }})" class="btn btn-xs btn-danger">删除</button>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- 分页按钮 -->
    <div id="page-div"
         class="col-lg-12 col-xs-12 text-center {% if record_list.pages <= 1 %}hidden{% endif %}">
        <ul style="margin: 0;" class="pagination pagination-sm">
            <li data-page="1"><a href="javascript:">首页</a></li>
            {% for foo in record_list.pageNums %}
                <li data-page="{{ foo }}" class="{% if foo == record_list.page %}active{% endif %}">
                    <a href="javascript:">{{ foo }}</a>
                </li>
            {% endfor %}
            <li data-page="{{ record_list.pages }}"><a href="javascript:">尾页</a></li>
        </ul>
        <span style="padding-top: 15px; font-size: 12px;" class="pull-right">
            共{{ record_list.pages }}页，{{ record_list.total }}条数据
        </span>
    </div>
</div>

{% include 'admin/footer.html' %}
